<template>
    <Header :title="address" />
    <van-address-edit
      :area-list="areaList"
      :address-info="addressInfo"
      show-delete
      show-set-default
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
    />
  </template>

<script>


import {reactive,toRefs,onMounted} from 'vue'

import Header from '../../components/Header.vue'

import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'
import { computed } from 'vue'
import { Toast } from 'vant'

export default {
  components: { Header },


        setup(){
          
            let  store = useStore()
            let  router  = useRouter()
            let  route = useRoute()
            let data = reactive({

                areaList: {
                        province_list: {
                        110000: "广东省",
                        120000: "浙江省",
                        },
                        city_list: {
                        110100: "广州市",
                        110200: "深圳市",
                        120100: "杭州市",
                        120200: "宁波市",
                        },
                        county_list: {
                        110101: "天河区",
                        110102: "海珠区",
                        120102: "上城区",
                        130102: "下城区",
                        },
                    },

                        addressInfo:{},
                    


            })

            
             
          //1、保存按钮逻辑

        const  onSave  = (content)=>{

           console.log('+++++++++',content)
            
            if(route.query.type ===  'add'){

                 store.commit('ADDADDRESS',content)
            }else{


                store.commit('CHANGEADDRESS',content)
            }

          Toast('保存成功')


           setTimeout(()=>{

            router.go(-1)
           },1000)
        }


        //2、删除按钮逻辑

        const  onDelete = (content)=>{


            store.commit('DELETEADDRESS',content)

            Toast('删除成功')

            setTimeout(()=>{

            router.back()
            },1000)

        }
           

        // 3、数据初始化

        const init = () => {

         store.state.userAddress.forEach((item) => {
                if (item.id === Number(route.query.id)) {
                data.addressInfo = item;
                }
            });
    };

        onMounted(() => {
                init()
            })
         
    // 4、标题显示内容的处理

    const  address = computed(()=>{

        return       route.query.type  === "add" ? '地址新增' :'地址编辑'
    })

        
            return {

                ...toRefs(data),
                onSave,
                onDelete,
                address
            }


        }
        
    }
</script>

<style lang="less" scoped>
          
/deep/ .van-button--danger {
        background-color: #ffc400;
        border-color: #ffc400;
              }
 /deep/ .van-switch--on {
        background-color: #ffc400;
        }

</style>b